import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";
import * as e from "echarts";

declare var $: any;

@Component({
  template: `
    <div class="sjbcrk comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body iecrollkf chromescrollkf">
          <div class="jdRoom fl">
            <div class="line"></div>
            <div class="kq" (click)="activeCircleHander('kq')"></div>
            <div class="kz" (click)="activeCircleHander('kz')"></div>
            <div class="kh" (click)="activeCircleHander('kh')"></div>
            <div class="activeCircle"></div>
            <div class="kqmc mc mcactive" (click)="activeCircleHander('kq')">
              <div>考前</div>
              <div>(印刷厂->保密室)</div>
            </div>
            <div class="kzmc mc" (click)="activeCircleHander('kz')">
              <div>考中</div>
              <div>(保密室<->考点)</div>
            </div>
            <div class="khmc mc" (click)="activeCircleHander('kh')">
              <div>考后</div>
              <div>(保密室->评卷中心)</div>
            </div>
          </div>
          <div class="chartRoom fl" (click)="showInfo()">
            <div id="chartID"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fad" id="infoModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel3">
      <div class="modal-dialog bigmodalwidth" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel3">{{modaltitle}}</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-lg-12">
                <div class="dataline" *ngIf="DateList.length">
                  <div *ngFor="let datav of DateList;index as i" class="dataitem fr"
                       [class.activeitem]="datav.active" (click)="activeData(datav,i)">{{datav.mc}}
                  </div>
                </div>
                <div class="crk">
                  <div class="crkroom" *ngIf="activeInfo">
                    <!--印刷厂--- 保密室-->
                    <ng-container *ngIf="activeInfo.indexv==DateList.length-1">
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_yscck" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.yscck_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>印刷厂计划出库</span> <span>{{activeInfo.jhyscck}}</span></div>
                          <div class="bottomtxt"><span>印刷厂实际出库</span> <span>{{activeInfo.sjyscck}}</span></div>
                          <div class="bottomtxt"><span>印刷厂未出库</span> <span>{{activeInfo.wckysc}}</span></div>
                        </div>
                      </div>
                      <div class="arr fl">
                        <img style="width:100%" src="assets/img/zhzs/jt.png">
                      </div>
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_bmsrk1" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.bmsrk1_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>保密室计划入库</span> <span>{{activeInfo.jhbmsrk}}</span></div>
                          <div class="bottomtxt"><span>保密室实际入库</span> <span>{{activeInfo.sjbmsrk}}</span></div>
                          <div class="bottomtxt"><span>保密室未入库</span> <span>{{activeInfo.wrkbms}}</span></div>
                        </div>
                      </div>
                    </ng-container>
                    <!--保密室--- 评卷中心-->
                    <ng-container *ngIf="activeInfo.indexv==0">
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_bmsck1" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.bmsck1_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>保密室计划出库</span> <span>{{activeInfo.jhbmsck}}</span></div>
                          <div class="bottomtxt"><span>保密室实际出库</span> <span>{{activeInfo.sjbmsck}}</span></div>
                          <div class="bottomtxt"><span>保密室未出库</span> <span>{{activeInfo.wckbms}}</span></div>
                        </div>
                      </div>
                      <div class="arr fl">
                        <img style="width:100%" src="assets/img/zhzs/jt.png">
                      </div>
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_pjzxrk" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.pjzxrk_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>评卷中心计划入库</span> <span>{{activeInfo.jhpjzxrk}}</span></div>
                          <div class="bottomtxt"><span>评卷中心实际入库</span> <span>{{activeInfo.sjpjzxrk}}</span></div>
                          <div class="bottomtxt"><span>评卷中心未入库</span> <span>{{activeInfo.wrkpjzx}}</span></div>
                        </div>
                      </div>
                    </ng-container>
                    <!--保密室---考点-->
                    <ng-container *ngIf="activeInfo.indexv!=0&&activeInfo.indexv!=DateList.length-1">
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_bmsck" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.bmsck_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>保密室计划出库</span> <span>{{activeInfo.jhbmsck}}</span></div>
                          <div class="bottomtxt"><span>保密室实际出库</span> <span>{{activeInfo.sjbmsck}}</span></div>
                          <div class="bottomtxt"><span>保密室未出库</span> <span>{{activeInfo.wckbms}}</span></div>
                        </div>
                      </div>
                      <div class="arr fl">
                        <img style="width:100%" src="assets/img/zhzs/jt.png">
                      </div>
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_kdrk" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.kdrk_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>考点计划入库</span> <span>{{activeInfo.jhkdrk}}</span></div>
                          <div class="bottomtxt"><span>考点实际入库</span> <span>{{activeInfo.sjkdrk}}</span></div>
                          <div class="bottomtxt"><span>考点未入库</span> <span>{{activeInfo.wrkkd}}</span></div>
                        </div>
                      </div>
                      <div class="arr fl">

                      </div>
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_kdck" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.kdck_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>考点计划出库</span> <span>{{activeInfo.jhkdck}}</span></div>
                          <div class="bottomtxt"><span>考点实际出库</span> <span>{{activeInfo.sjkdck}}</span></div>
                          <div class="bottomtxt"><span>考点未出库</span> <span>{{activeInfo.wckkd}}</span></div>
                        </div>
                      </div>
                      <div class="arr fl">
                        <img style="width:100%" src="assets/img/zhzs/jt.png">
                      </div>
                      <div class="csitem fl">
                        <div class="toproom">
                          <div class="jd fl">
                            <div *ngFor="let cell of activeInfo.list_bmsrk" class="jdblock fl"
                                 [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                          </div>
                          <div class="jdtxt fl">{{activeInfo.bmsrk_jd}}</div>
                        </div>
                        <div class="bottomroom">
                          <div class="bottomtxt"><span>保密室计划入库</span> <span>{{activeInfo.jhbmsrk}}</span></div>
                          <div class="bottomtxt"><span>保密室实际入库</span> <span>{{activeInfo.sjbmsrk}}</span></div>
                          <div class="bottomtxt"><span>保密室未入库</span> <span>{{activeInfo.wrkbms}}</span></div>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">确 定</button>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".sjbcrk{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".title_btns{position: absolute;right: 0px;top: 0px;width: 60px;height: 24px;line-height: 24px}",
    ".title_btns>span:first-child{display: inline-block;width: 30px;text-align: center;font-size: 18px;cursor: pointer}",
    ".title_btns>span:last-child{display: inline-block;width: 30px;text-align: center;font-size: 20px;cursor: pointer}",
    ".content>.body{width: 100%;height: calc(100% - 44px);padding: 16.5px 10px;overflow-x: auto;overflow-y: hidden;}",
    // 考试进度条
    ".body>.jdRoom{position: relative; width: 160px;height: 260px;}",
    ".line{position: absolute;left: 10px;top: 0px;width: 5px;height: 260px;background-color: #cccccc}",
    ".kq{position: absolute; width: 20px;height: 20px;left: 2.5px;top: 0px;border-radius: 50%;background-color: #ccc;cursor: pointer}",
    ".kz{position: absolute; width: 20px;height: 20px;left: 2.5px;top: calc(130px - 10px);border-radius: 50%;background-color: #ccc;cursor: pointer}",
    ".kh{position: absolute; width: 20px;height: 20px;left: 2.5px;top:calc(260px - 20px);border-radius: 50%;background-color: #ccc;cursor: pointer}",
    ".activeCircle{position: absolute; width: 20px;height: 20px;left: 2.5px;top: 0px;border-radius: 50%;background-color: #1477F3;}",
    ".kqmc{position: absolute;left:calc(20px + 2.5px);top: 0px;width: auto;height: auto;margin-left: 10px }",
    ".kzmc{position: absolute;left:calc(20px + 2.5px);top: calc(130px - 10px);width: auto;height: auto;margin-left: 10px }",
    ".khmc{position: absolute;left:calc(20px + 2.5px);bottom: 0px;width: auto;height: auto; margin-left: 10px}",
    ".mcactive{color: #1477F3}",
    // 当前active进度条对应的柱形统计
    "#chartID{ width: calc(920px - 160px);height: 260px}",
    // modal
    ".dataline{height: 40px;width: 100%;}",
    ".crk{height: 250px;width: 100%;padding: 20px 0px;}",
    ".dataline>.dataitem{margin-left: 10px;width: 60px;text-align: center;height: 40px;line-height: 40px;background-color: #CEE8FF;color: #000000;cursor: pointer}",
    ".activeitem{background-color: #1F97F2!important;color: #ffffff!important;}",
    ".crk>.crkroom{width: 100%;height: 100%; padding: 0px 10px; background-color: rgb(245, 250, 255)}",
    ".csitem{width: 250px;height: auto;padding: 40px 0px}",
    ".csitem>.toproom{width: 100%;height: 30px;}",
    ".csitem>.bottomroom{width: 100%;height: calc(100% - 30px)}",
    ".jd{width: 200px;height: 30px;padding: 2px 0px}",
    ".jdtxt{width: 50px;height: 30px;line-height: 30px;font-size: 17px; text-align: center}",
    ".jd>.jdblock{width: 16px;height: 26px;margin-right: 4px;border-radius: 3px}",
    ".bottomtxt{width: 250px;height: 30px;font-size: 17px}",
    ".bottomtxt>span:first-child{display: inline-block;width: 200px;height: 30px;line-height: 30px}",
    ".bottomtxt>span:last-child{display: inline-block;width: 50px;height: 30px;line-height: 30px;text-align: right}",
    ".arr{width: 40px;height: 210px;line-height: 210px;padding: 0px 10px}"
  ]
})
export class Zhzs_sjbcrkComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  modaltitle: string = "";
  s_kqbh: string = "";
  s_ksjhbh: string = "";
  lockid: any;
  intervalnum: number = 10 * 60 * 1000;
  chart: any;


  DateList: any[] = [];
  DatecrkInfo: any[] = [];
  activeInfo: any;


  showInfo(): void {
    $("#infoModal").modal({
      keyboard: true,
      backdrop: false
    });
  }

  /**
   * lockid  ---定时获取最新的出入库数据，
   * 更新 kq kz kh数据
   */
  getInfo(): void {
    if (!this.s_kqbh || !this.s_ksjhbh) {
      return
    }
    const url = "sjgz/zsymlsfw/sjbcrkzl";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const crkzlsjList = resp.crkzlsjList;
            if (crkzlsjList && crkzlsjList.length) {
              crkzlsjList.forEach((item) => {
                item["rqms"] = this.commservice.convertTimeToInt(item.rq);
              });
              const orderlist = this.commservice.sortArr(crkzlsjList, "rqms", 'desc'); // fr浮动，降序
              console.log("orderlist", orderlist);
              this.DateList.length = 0;
              this.DatecrkInfo.length = 0;
              let activeIndex: number = 0;
              let activeCircle: string = "";
              orderlist.forEach((item, index) => {
                // 日期
                const datev = new Date(item.rqms).getDate();
                const obj_date = {
                  mc: datev + "日",
                  active: false
                };
                const now = new Date().getDate();  //modal详情中 active day始终是 当天
                if (now == datev) {
                  obj_date.active = true;
                  activeIndex = index;
                } else {
                  if (index == orderlist.length - 1) {
                    obj_date.active = true;
                    activeIndex = orderlist.length - 1;
                  }
                }
                this.DateList.push(obj_date);
                // 对应日期的详情
                const obj_info = {
                  indexv: index,
                  bt: item.bt,
                  jhyscck: item.jhyscck,  // 计划印刷厂出库
                  sjyscck: item.sjyscck, //实际印刷厂出库
                  wckysc: Number(item.jhyscck) - Number(item.sjyscck),  // 印刷厂未出库
                  jhbmsrk: item.jhbmsrk,  // 计划保密室入库
                  sjbmsrk: item.sjbmsrk, // 实际保密室入库
                  wrkbms: Number(item.jhbmsrk) - Number(item.sjbmsrk),   // 保密室未入库
                  jhbmsck: item.jhbmsck, // 计划保密室出库
                  sjbmsck: item.sjbmsck, // 实际保密室出库
                  wckbms: Number(item.jhbmsck) - Number(item.sjbmsck),  // 保密室未出库
                  jhkdrk: item.jhkdrk, // 计划考点入库
                  sjkdrk: item.sjkdrk, //实际考点入库
                  wrkkd: Number(item.jhkdrk) - Number(item.sjkdrk),  // 考点未入库
                  jhkdck: item.jhkdck,  // 计划考点出库
                  sjkdck: item.sjkdck, //实际考点出库
                  wckkd: Number(item.jhkdck) - Number(item.sjkdck),  // 考点未出库
                  jhpjzxrk: item.jhpjzxrk, // 计划评卷中心入库
                  sjpjzxrk: item.sjpjzxrk, //实际评卷中心入库
                  wrkpjzx: Number(item.jhpjzxrk) - Number(item.sjpjzxrk),  // 评卷中心未入库
                  yscck_jd: "0%",  // 印刷厂出库  进度
                  list_yscck: [],
                  bmsrk1_jd: "0%",  // 保密室入库1  进度
                  list_bmsrk1: [],
                  bmsck_jd: "0%",   //## 保密室出库  进度
                  list_bmsck: [],
                  kdrk_jd: "0%",   //## 考点入库  进度
                  list_kdrk: [],
                  kdck_jd: "0%",   //## 考点出库  进度
                  list_kdck: [],
                  bmsrk_jd: "0%", //### 保密室入库  进度
                  list_bmsrk: [],
                  bmsck1_jd: "0%", // 保密室出库1  进度
                  list_bmsck1: [],
                  pjzxrk_jd: "0%",  // 评卷中心入库  进度
                  list_pjzxrk: [],
                  stage: "",   //kq  kz kh
                }

                if (index == orderlist.length - 1) {
                  obj_info.stage = "kq";
                  // 计算进度
                  let yscck_jdv = 0, bmsrk_jdv = 0, yscck_jdv1 = 0, bmsrk_jdv1 = 0;
                  if (item.jhyscck) {
                    yscck_jdv = Math.ceil(item.sjyscck / item.jhyscck * 10); //印刷厂出库,四舍五入
                    yscck_jdv1 = item.sjyscck / item.jhyscck * 100; // 印刷厂出库
                  }
                  if (item.jhbmsrk) {
                    bmsrk_jdv = Math.ceil(item.sjbmsrk / item.jhbmsrk * 10); //保密室入库，四舍五入
                    bmsrk_jdv1 = item.sjbmsrk / item.jhbmsrk * 100; //保密室入库
                  }
                  obj_info.yscck_jd = `${yscck_jdv1.toFixed(1)}%`; // 保留一位小数
                  obj_info.bmsrk1_jd = `${bmsrk_jdv1.toFixed(1)}%`;// 保留一位小数
                  for (let i = 0; i < 10; i++) {
                    if (i < yscck_jdv) {
                      obj_info.list_yscck.push(true);
                    } else {
                      obj_info.list_yscck.push(false);
                    }
                    if (i < bmsrk_jdv) {
                      obj_info.list_bmsrk1.push(true);
                    } else {
                      obj_info.list_bmsrk1.push(false);
                    }
                  }
                } else if (index == 0) {
                  obj_info.stage = "kh";
                  // 计算进度
                  let bmsck1_jdv = 0, pjzxrk_jdv = 0, bmsck1_jdv1 = 0, pjzxrk_jdv1 = 0;
                  if (item.jhbmsck) {
                    bmsck1_jdv = Math.ceil(item.sjbmsck / item.jhbmsck * 10); //保密室出库, 四舍五入
                    bmsck1_jdv1 = item.sjbmsck / item.jhbmsck * 100; //保密室出库
                  }
                  if (item.jhpjzxrk) {
                    pjzxrk_jdv = Math.ceil(item.sjpjzxrk / item.jhpjzxrk * 10); //评卷中心入库,四舍五入
                    pjzxrk_jdv1 = item.sjpjzxrk / item.jhpjzxrk * 100; //评卷中心入库
                  }
                  obj_info.bmsck1_jd = `${bmsck1_jdv1.toFixed(1)}%`; // 保留一位小数
                  obj_info.pjzxrk_jd = `${pjzxrk_jdv1.toFixed(1)}%`;// 保留一位小数
                  for (let i = 0; i < 10; i++) {
                    if (i < bmsck1_jdv) {
                      obj_info.list_bmsck1.push(true);
                    } else {
                      obj_info.list_bmsck1.push(false);
                    }
                    if (i < pjzxrk_jdv) {
                      obj_info.list_pjzxrk.push(true);
                    } else {
                      obj_info.list_pjzxrk.push(false);
                    }
                  }
                } else {
                  obj_info.stage = "kz";
                  // 计算进度
                  let bmsck_jdv = 0, kdrk_jdv = 0, kdck_jdv = 0, bmsrk_jdv = 0;
                  let bmsck_jdv1 = 0, kdrk_jdv1 = 0, kdck_jdv1 = 0, bmsrk_jdv1 = 0;
                  if (item.jhbmsck) {
                    bmsck_jdv = Math.ceil(item.sjbmsck / item.jhbmsck * 10); //保密室出库,四舍五入
                    bmsck_jdv1 = item.sjbmsck / item.jhbmsck * 100; //保密室出库,
                  }
                  if (item.jhkdrk) {
                    kdrk_jdv = Math.ceil(item.sjkdrk / item.jhkdrk * 10); //考点入库,四舍五入
                    kdrk_jdv1 = item.sjkdrk / item.jhkdrk * 100;
                  }
                  if (item.jhkdck) {
                    kdck_jdv = Math.ceil(item.sjkdck / item.jhkdck * 10); //考点出库,四舍五入
                    kdck_jdv1 = item.sjkdck / item.jhkdck * 100;
                  }
                  if (item.jhbmsrk) {
                    bmsrk_jdv = Math.ceil(item.sjbmsrk / item.jhbmsrk * 10); //保密室入库 ,四舍五入
                    bmsrk_jdv1 = item.sjbmsrk / item.jhbmsrk * 100;
                  }
                  obj_info.bmsck_jd = `${bmsck_jdv1.toFixed(1)}%`; // 保留一位小数
                  obj_info.kdrk_jd = `${kdrk_jdv1.toFixed(1)}%`;  // 保留一位小数
                  obj_info.kdck_jd = `${kdck_jdv1.toFixed(1)}%`; // 保留一位小数
                  obj_info.bmsrk_jd = `${bmsrk_jdv1.toFixed(1)}%`; // 保留一位小数
                  for (let i = 0; i < 10; i++) {
                    if (i < bmsck_jdv) {
                      obj_info.list_bmsck.push(true);
                    } else {
                      obj_info.list_bmsck.push(false);
                    }
                    if (i < kdrk_jdv) {
                      obj_info.list_kdrk.push(true);
                    } else {
                      obj_info.list_kdrk.push(false);
                    }
                    if (i < kdck_jdv) {
                      obj_info.list_kdck.push(true);
                    } else {
                      obj_info.list_kdck.push(false);
                    }
                    if (i < bmsrk_jdv) {
                      obj_info.list_bmsrk.push(true);
                    } else {
                      obj_info.list_bmsrk.push(false);
                    }
                  }
                }
                this.DatecrkInfo.push(obj_info);
              });
              // modal 框详情 焦点日期的  出入库数据详情
              this.activeInfo = this.DatecrkInfo[activeIndex];
              if (activeIndex == orderlist.length - 1) {
                activeCircle = "kq";
              } else if (activeIndex == 0) {
                activeCircle = "kh";
              } else {
                activeCircle = "kz";
              }
              this.activeCircleHander(activeCircle);
              this.commservice.log("Datelist", this.DateList);
              this.commservice.log("DatecrkInfo", this.DatecrkInfo);
              this.commservice.log("activeInfo", this.activeInfo);
            }
          }
        }
      });
    })
  }

  /**
   * modal 详情中切换日期查看详情
   * @param datav
   * @param {number} n
   */
  activeData(datav: any, n: number): void {
    this.DateList.forEach((item) => {
      item.active = false;
    });
    datav.active = true;
    this.activeInfo = this.DatecrkInfo[n];
    this.commservice.log("nowactiveday", this.activeInfo);
  }

  /**
   * @param {string} jd
   * kq
   * kz
   * kh
   */
  activeCircleHander(jd: string): void {
    switch (jd) {
      case "kq":
        $(".activeCircle").animate({
          top: 0
        }, 'fast');
        $(".mc").removeClass("mcactive");
        $(".kqmc").addClass("mcactive");
        this.createBar(jd);
        break;
      case "kz":
        $(".activeCircle").animate({
          top: 120
        }, 'fast');
        $(".mc").removeClass("mcactive");
        $(".kzmc").addClass("mcactive");
        this.createBar(jd);
        break;
      case "kh":
        $(".activeCircle").animate({
          top: 240
        }, 'fast');
        $(".mc").removeClass("mcactive");
        $(".khmc").addClass("mcactive");
        this.createBar(jd);
        break;
    }
  }

  /**
   * @param {string} jd
   * kq
   * kz
   * kh
   */
  createBar(jd: string): void {
    const dataList = this.DatecrkInfo.filter((item) => {
      return item.stage == jd;
    });
    switch (jd) {
      case "kq": {
        let yscjhck: number = 0;  //印刷厂计划出库
        let yscsjck: number = 0;  // 印刷厂实际出库
        let bmsjhrk: number = 0; // 保密室计划入库
        let bmssjrk: number = 0; // 保密室实际入库
        dataList.forEach((obj) => {
          yscjhck += obj.jhyscck;
          yscsjck += obj.sjyscck;
          bmsjhrk += obj.jhbmsrk;
          bmssjrk += obj.sjbmsrk;
        });
        const items = ["出库（印刷厂)", "入库（保密室）"];
        const itemsdatas_jh: any[] = [yscjhck, bmsjhrk];
        const itemsdatas_sj: any[] = [yscsjck, bmssjrk];
        if (this.chart) {
          this.chart.clear();
        } else {
          this.chart = e.init(document.getElementById('chartID') as HTMLDivElement);
        }
        const option = this.getOption(items, itemsdatas_jh, itemsdatas_sj);
        this.chart.setOption(option);
      }
        break;
      case "kz": {
        let bmsjhck: number = 0;  //保密室计划出库
        let bmssjck: number = 0; // 保密室实际出库
        let kdjhrk: number = 0; // 考点计划入库
        let kdsjrk: number = 0; // 考点实际入库
        let kdjhck: number = 0; // 考点计划出库
        let kdsjck: number = 0; // 考点实际出库
        let bmsjhrk: number = 0; // 保密室计划入库
        let bmssjrk: number = 0; // 保密室实际入库
        dataList.forEach((obj) => {
          bmsjhck += obj.jhbmsck;
          bmssjck += obj.sjbmsck;
          kdjhrk += obj.jhkdrk;
          kdsjrk += obj.sjkdrk;
          kdjhck += obj.jhkdck;
          kdsjck += obj.sjkdck;
          bmsjhrk += obj.jhbmsrk;
          bmssjrk += obj.sjbmsrk;
        });

        const items = ["出库（保密室)", "入库（考点）", "出库（考点）", "入库（保密室）"];
        const itemsdatas_jh: any[] = [bmsjhck, kdjhrk, kdjhck, bmsjhrk];
        const itemsdatas_sj: any[] = [bmssjck, kdsjrk, kdsjck, bmssjrk];

        if (this.chart) {
          this.chart.clear();
        } else {
          this.chart = e.init(document.getElementById('chartID') as HTMLDivElement);
        }
        const option = this.getOption(items, itemsdatas_jh, itemsdatas_sj);
        this.chart.setOption(option);
      }
        break;
      case "kh": {
        let bmsjhck: number = 0;  //保密室计划出库
        let bmssjck: number = 0; // 保密室实际出库
        let pjzxjhrk: number = 0; // 评卷中心计划入库
        let pjzxsjrk: number = 0; //评卷中心实际入库
        dataList.forEach((obj) => {
          bmsjhck += obj.jhbmsck;
          bmssjck += obj.sjbmsck;
          pjzxjhrk += obj.jhpjzxrk;
          pjzxsjrk += obj.sjpjzxrk;
        });
        const items = ["出库（保密室)", "入库（评卷中心）"];
        const itemsdatas_jh: any[] = [bmsjhck, pjzxjhrk];
        const itemsdatas_sj: any[] = [bmssjck, pjzxsjrk];
        if (this.chart) {
          this.chart.clear();
        } else {
          this.chart = e.init(document.getElementById('chartID') as HTMLDivElement);
        }
        const option = this.getOption(items, itemsdatas_jh, itemsdatas_sj);
        this.chart.setOption(option);
      }
        break;
    }
  }


  getOption(itemname: any, items_datas_jh: any, items_datas_sj: any): any {
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '2%',
        right: '0%',
        bottom: '5%',
        top: "15%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "#CFD4D9",
          fontSize: 18
        }
      },
      xAxis: [{
        type: 'category',
        data: itemname,
        axisLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138 143 151)",
          interval: 0,  // 强制显示所有
          // rotate: 30
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      // dataZoom: [
      //   {
      //     type: 'slider',
      //     xAxisIndex: 0,
      //     filterMode: 'empty',
      //     endValue: 16,
      //     show: false
      //   },
      //   {
      //     type: 'slider',
      //     yAxisIndex: 0,
      //     filterMode: 'empty',
      //     show: false
      //   },
      //   {
      //     type: 'inside',
      //     xAxisIndex: 0,
      //     filterMode: 'empty'
      //   },
      //   {
      //     type: 'inside',
      //     yAxisIndex: 0,
      //     filterMode: 'empty'
      //   }
      // ],
      yAxis: [{
        type: 'value',
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138 143 151)",
        },
        splitLine: {
          lineStyle: {
            color: '#CFD4D9'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [
        //   {
        //   type: "bar",
        //   name: "考点",
        //   itemStyle: {
        //     color: "#FBD545",
        //   },
        //   label: {
        //     show: false,
        //     position: "top",
        //     fontSize: 18,
        //     color: "#ffffff"
        //   },
        //   //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        //   data: items_datas_kd,
        // }, {
        //   type: "bar",
        //   name: "保密室",
        //   itemStyle: {
        //     color: "#F73A94"
        //   },
        //   label: {
        //     show: false,
        //     position: "top",
        //     fontSize: 18,
        //     color: "#ffffff"
        //   },
        //   //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        //   data: items_datas_bms,
        // },
        {
          type: "bar",
          name: "计划数量",
          itemStyle: {
            color: "#9BE5EE"
          },
          label: {
            show: false,
            position: "top",
            fontSize: 18,
            color: "#ffffff"
          },
          //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
          data: items_datas_jh,
          barWidth: 20,  //柱子宽 20
        },
        {
          type: "bar",
          name: "实际数量",
          itemStyle: {
            color: "#01BBD4"
          },
          label: {
            show: false,
            position: "top",
            fontSize: 18,
            color: "#ffffff"
          },
          //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
          data: items_datas_sj,
          barWidth: 20, //柱子宽 20
        }]
    };
    return option;
  }


  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx === "pcompkqchange") {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 试卷包出入库情况总览`;
      this.modaltitle = `${compdata.kqmc}试卷入库库详情`;
      this.activeCircleHander('kq');
      this.getInfo();
      this.lockid = setInterval(() => {
        this.getInfo();
      }, this.intervalnum);

    } else {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 试卷包出入库情况总览`;
      this.modaltitle = `${compdata.kqmc}试卷入库库详情`;
      this.getInfo();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const frompage = resp.frompage;
      const paramchangelx = resp.paramchangelx;
      const paramchangedata = resp.paramchangedata;
      switch (frompage) {
        case "zhzs": {
          if (paramchangelx === "pcompkqchange") {
            this.s_kqbh = paramchangedata.kqbh;
            this.s_ksjhbh = paramchangedata.ksjhbh;
            this.comptitle = `【${paramchangedata.kqmc}】 试卷包出入库情况总览`;
            this.modaltitle = `${paramchangedata.kqmc}试卷入库库详情`;
            this.getInfo();
          }
        }
          break;
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=sjbcrk】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {
    if (this.lockid) {
      clearInterval(this.lockid);
    }
  }

}
